{include file="public/nheader" /}
<style type="text/css">
    #lay-tableList {
        height: auto;
    }

    .layui-table-view .layui-table[lay-size=lg] .layui-table-cell {
        height: auto;
    }
</style>

<div class="layui-fluid">
    <div class="layui-card">
        <!-- // 默认操作按钮 -->
        <div class="layui-card-header layadmin-card-header-auto ">
            <div class="layui-form">
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <div class="layui-input-inline ">
                            <select name="images" lay-verify="">
                                <option value="">图片商品</option>
                                <option value="2" {if !empty(input('get.images')) &&
                                    input('get.images')==2}selected{/if}>
                                    无</option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <div class="layui-input-inline ">
                            <select name="ishot" lay-verify="">
                                <option value="">推荐</option>
                                <option value="1" {if !empty(input('get.ishot')) && input('get.ishot')==1}selected{/if}>
                                    正常</option>
                                <option value="2" {if !empty(input('get.ishot')) && input('get.ishot')==2}selected{/if}>
                                    推荐</option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <div class="layui-input-inline ">
                            <select name="isnew" lay-verify="">
                                <option value="">新品</option>
                                <option value="1" {if !empty(input('get.isnew')) && input('get.isnew')==1}selected{/if}>
                                    正常</option>
                                <option value="2" {if !empty(input('get.isnew')) && input('get.isnew')==2}selected{/if}>
                                    新品</option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <div class="layui-input-inline ">
                            <select name="isshow" lay-verify="">
                                <option value="">显示状态</option>
                                <option value="1" {if !empty(input('get.isshow')) &&
                                    input('get.isshow')==1}selected{/if}>显示</option>
                                <option value="2" {if !empty(input('get.isshow')) &&
                                    input('get.isshow')==2}selected{/if}>隐藏</option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <div class="layui-input-inline ">
                            <select name="isremove" lay-verify="">
                                <option value="">上下架状态</option>
                                <option value="1" {if !empty(input('get.isremove')) &&
                                    input('get.isremove')==1}selected{/if}>正常</option>
                                <option value="2" {if !empty(input('get.isremove')) &&
                                    input('get.isremove')==2}selected{/if}>下架</option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <div class="layui-input-inline">
                            <select name="dealer" lay-filter="dealer" lay-search>
                                <option value="">选择经销商</option>
                                <option value="无">无经销商</option>
                                {foreach $dealer as $v}
                                <option value="{$v}" {if !empty(input('get.dealer')) &&
                                    input('get.dealer')==$v}selected{/if}>{$v}</option>
                                {/foreach}
                            </select>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <div class="layui-input-inline">
                            <select name="agentid" lay-filter="agentid" lay-search>
                                <option value="">选择门店</option>
                                {foreach $agent as $v}
                                <option value="{$v.id}" {if !empty(input('get.agentid')) &&
                                    input('get.agentid')==$v.id}selected{/if}>{$v.nickname}</option>
                                {/foreach}
                            </select>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <div class="layui-input-inline">
                            <select name="cate" lay-filter="cate">
                                <option value="">请选择主分类</option>
                                {foreach $cate as $v}
                                <option value="{$v.id}" {if !empty(input('get.cate')) &&
                                    input('get.cate')==$v.id}selected{/if}>{$v.name}{if $v.isshow == 2}(已隐藏){/if}
                                </option>
                                {/foreach}
                            </select>
                        </div>
                    </div>
                    <!-- <div class="layui-inline">
                        <div class="layui-input-inline">
                            <select name="subcate" lay-filter="subcate">
                                <option value="">请选择子分类</option>
                            </select>
                        </div>
                    </div> -->
                    <div class="layui-inline">
                        <div class="layui-input-inline ">
                            <input name="title" class="layui-input" type="text" placeholder="产品名称/商品编码" />
                        </div>
                    </div>
                    <div class="layui-inline">
                        <div class="layui-input-inline ">
                            <input name="id" class="layui-input" type="number" placeholder="ID" />
                        </div>
                    </div>
                    <div class="layui-inline">
                        <!-- // 默认搜索 -->
                        <button class="layui-btn icon-btn" lay-filter="formSearch" lay-submit>搜索</button>
                        <!-- // 打开添加页面 -->
                        <button class="layui-btn icon-btn" lay-maxmin="true" lay-open="" data-title="添加"
                            data-area="60%,80%" data-url="/agent/product_edit?agentid={:input('get.agentid')}">添加
                        </button>
                        <!-- // 删除所有 -->
                        <button class="layui-btn icon-btn layui-btn-danger" lay-batch="lay-tableList"
                            data-url="/agent/product_del">批量删除
                        </button>
                        <button class="layui-btn icon-btn layui-btn-warm" lay-submit lay-filter="excels2">导出编号
                        </button>
                        <button class="layui-btn icon-btn layui-btn-green" lay-submit lay-filter="taocanlist">加入组合
                        </button>
                        <button class="layui-btn icon-btn" id="excels3">更新编号
                        </button>
                        <button class="layui-btn icon-btn layui-btn-warm" id="excels">EXCEL批量导入产品
                        </button>
                        <a οnclick="event.cancelBubble=true" target="_blank" href="/demos.xlsx">(上传示例)</a>
                    </div>
                </div>
            </div>
        </div>

        <!-- // 创建数据实例 -->
        <table id="lay-tableList" lay-filter="lay-tableList"></table>
    </div>
</div>
<script type="text/html" id="columnStatus">
    <input type="checkbox" lay-filter="switchStatus" data-url="/agent/product_status?id={{d.id}}&field=isshow" lay-skin="switch"
    {{d.isshow==1?'checked':''}}   lay-text="显示|隐藏"   />
</script>
<script type="text/html" id="columnStatuss">
    <input type="checkbox" lay-filter="switchStatus" data-url="/agent/product_status?id={{d.id}}&field=isremove" lay-skin="switch"
    {{d.isremove==1?'checked':''}}   lay-text="正常|下架"   />
</script>
<script type="text/html" id="columnIshot">
    <input type="checkbox" lay-filter="switchStatus" data-url="/agent/product_status?id={{d.id}}&field=ishot" lay-skin="switch"
    {{d.ishot==2?'checked':''}}   lay-text="推荐|正常"   />
</script>
<script type="text/html" id="columnIsnew">
    <input type="checkbox" lay-filter="switchStatus" data-url="/agent/product_status?id={{d.id}}&field=isnew" lay-skin="switch"
    {{d.isnew==2?'checked':''}}   lay-text="新品|正常"   />
</script>
<!-- // 列表工具栏 -->
<script type="text/html" id="tableBar">
    <a class="layui-table-text" lay-open data-title="编辑" data-area="60%,80%" data-url="/agent/product_edit?id={{d.id}}" >编辑</a>
    <div class="layui-divider layui-divider-vertical"></div>
    <a class="layui-table-text" style="color: green;" lay-open data-title="加入组合" data-area="90%,90%" data-url="/agent/taocan_list?id={{d.id}}&taocanid={:input('taocanid/d',0)}" >加入组合</a>
    <div class="layui-divider layui-divider-vertical"></div>
    <a class="layui-table-text" data-url="/agent/product_del?id={{d.id}}" lay-event="del">删除</a>
</script>
<script type="text/html" id="imageTpl">
    <img  width="50px" height="50px" class="table-image"  src="{{ d.images || 'res.layui.com/images/layui/logo.png' }}">
  </script>
{include file="public/nfooter"}
<script>
    layui.use(['table', 'upload', 'form'], function () {
        var table = layui.table;
        var upload = layui.upload;
        var form = layui.form;
        //执行实例
        form.on('submit(taocanlist)', function (data) {
            var checkStatus = table.checkStatus('lay-tableList');
            var checkedData = checkStatus.data;
            var ids = [];
            checkedData.forEach(function (row) {
                ids.push(row.id);
            });
            if (ids.length <= 0) {
                layer.msg('请选择数据', { icon: 2, time: 1000 });
                return;
            }
            var str = ids.join(',');
            layer.open({
                type: 2, // iframe模式
                title: '加入套餐',
                content: "/agent/taocan_list?id=" + str + "&taocanid={:input('taocanid/d',0)}",
                area: ['90%', '90%']
            });
        });
        //执行实例
        form.on('submit(excels2)', function (data) {
            var checkStatus = table.checkStatus('lay-tableList');
            var checkedData = checkStatus.data;
            var ids = [];
            checkedData.forEach(function (row) {
                ids.push(row.id);
            });
            // if (ids.length <= 0) {
            //     layer.msg('请选择数据', { icon: 2, time: 1000 });
            //     return;
            // }
            var str = ids.join(',');
            window.open('/agent/product_excel?ids=' + str, '_blank');
        });
        var uploadInsts = upload.render({
            elem: '#excels3' //绑定元素
            , accept: 'file'
            , url: '/agent/import_product_bianhao' //上传接口
            , before: function (obj) { //obj参数包含的信息，跟 choose回调完全一致，可参见上文。
                layer.load(); //上传loading
            }
            , done: function (res) {
                layer.closeAll('loading'); //关闭loading
                //如果上传失败
                if (res.status == 0) {
                    var str = '';
                    $.each(res.data, function (i, obj) {
                        console.log(i, obj);
                        str += '<div>' + obj + '</div>';
                    });
                    layer.open({
                        type: 0,
                        content: str,
                        yes: function () {
                            location.reload();
                        }
                    });
                    return false;
                } else {
                    layer.msg(res.mag, { icon: 2, time: 1000 });
                    return false;
                }
            }
            , error: function () {
                layer.closeAll('loading'); //关闭loading
                layer.msg('请求失败请重试', { icon: 2, time: 1000 });
                return false;

            }
        });
        var uploadInst = upload.render({
            elem: '#excels' //绑定元素
            , accept: 'file'
            , url: '/agent/import_product' //上传接口
            , before: function (obj) { //obj参数包含的信息，跟 choose回调完全一致，可参见上文。
                layer.load(); //上传loading
            }
            , done: function (res) {
                layer.closeAll('loading'); //关闭loading
                //如果上传失败
                if (res.status == 0) {
                    var str = '';
                    $.each(res.data, function (i, obj) {
                        console.log(i, obj);
                        str += '<div>' + obj + '</div>';
                    });
                    layer.open({
                        type: 0,
                        content: str,
                        yes: function () {
                            location.reload();
                        }
                    });
                    return false;
                } else {
                    layer.msg(res.mag, { icon: 2, time: 1000 });
                    return false;
                }
            }
            , error: function () {
                layer.closeAll('loading'); //关闭loading
                layer.msg('请求失败请重试', { icon: 2, time: 1000 });
                return false;

            }
        });
        /*
         * 初始化表格
        */
        var isTable = table.render({
            elem: "#lay-tableList",
            where: {
                agentid: "{:input('agentid/d',0)}",
                taocanid: "{:input('taocanid/d',0)}"
            },
            toolbar: 'true'
            , defaultToolbar: [{
                title: '导出excel' //标题
                , layEvent: 'LAYTABLE_EXPORT' //事件名，用于 toolbar 事件中使用
                , icon: 'layui-icon-export' //图标类名
            }, {
                title: '打印页面' //标题
                , layEvent: 'LAYTABLE_PRINT' //事件名，用于 toolbar 事件中使用
                , icon: 'layui-icon-print' //图标类名
            }, {
                title: '筛选数据' //标题
                , layEvent: 'LAYTABLE_COLS' //事件名，用于 toolbar 事件中使用
                , icon: 'layui-icon-cols' //图标类名
            }]
            , limits: [10, 20, 40, 60, 80, 100, 150, 200, 300, 1000, 10000]
            , url: "{:url()}"
            , page: true
            , size: 'lg'
            , even: true
            , cols: [[
                { type: 'checkbox', width: 60 },
                { align: 'center', toolbar: '#tableBar', width: 250, title: '操作' },
                { field: 'id', align: 'center', sort: true, width: 80, title: 'ID' },
                { field: 'title', align: 'center', width: 200, title: '产品名称' },
                { field: 'dealer', align: 'center', width: 100, title: '经销商' },
                { field: 'images', width: 100, title: '图片', templet: '#imageTpl' },
                { field: 'price', align: 'center', width: 100, title: '单价' },
                { field: 'numbers', align: 'center', width: 100, title: '编号' },
                { field: 'inventory', align: 'center', width: 80, title: '库存' },
                { field: 'agent_name', align: 'center', width: 100, title: '品牌' },
                {
                    field: 'parame', align: 'center', width: 180, templet: function (d) {
                        var html = '';
                        d.parame.forEach(function (item) {
                            html += '<p>' + (item.name || '参数') + ':' + (item.numbers || '无') + '</p>'
                        })
                        return html;
                    }, title: '参数'
                },
                { field: 'cate_name', width: 100, align: 'center', title: '主分类' },
                { field: 'isremove', align: 'center', width: 120, templet: '#columnStatuss', title: '上下架' },
                { field: 'isshow', align: 'center', width: 120, templet: '#columnStatus', title: '显示' },
                { field: 'ishot', align: 'center', width: 100, templet: '#columnIshot', title: '推荐' },
                { field: 'isnew', align: 'center', width: 100, templet: '#columnIsnew', title: '新品' },
                { field: 'sort', align: 'center', width: 100, title: '排序' },
                { field: 'created', width: 200, align: 'center', title: '添加时间' },
            ]]
        });
        // 监听图片点击事件
        table.on('tool(lay-tableList)', function (obj) {
            console.log(obj);
            if (obj.event === 'uploadImage') {
                var data = obj.data;
                var tr = obj.tr;
                // 创建临时上传按钮并触发点击
                var uploadBtn = document.createElement('input');
                uploadBtn.type = 'file';
                uploadBtn.accept = 'image';
                uploadBtn.style.display = 'none';
                uploadBtn.onchange = function (e) {
                    var file = e.target.files[0];
                    if (!file) return;
                    // 显示加载中
                    var img = tr.find('.table-image')[0];
                    var originalSrc = img.src;
                    img.src = '';
                    // 模拟上传过程
                    var formData = new FormData();
                    formData.append('file', file);
                    // 这里替换为实际的上传接口
                    $.ajax({
                        url: '/base/upload_img',
                        type: 'POST',
                        data: formData,
                        processData: false,
                        contentType: false,
                        success: function (res) {
                            if (res.code === 200) {
                                // 更新表格数据
                                obj.update({
                                    image: res.url
                                });
                                layer.msg('图片上传成功');
                            } else {
                                img.src = originalSrc;
                                layer.msg(res.msg || '上传失败');
                            }
                        },
                        error: function () {
                            img.src = originalSrc;
                            layer.msg('上传失败');
                        }
                    });
                };
                document.body.appendChild(uploadBtn);
                uploadBtn.click();
                document.body.removeChild(uploadBtn);
            }
        });
    })
</script>
</body>